<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-10-05 21:05:38
 * @LastEditors: yuxi
 * @LastEditTime: 2022-10-26 15:43:19
-->
<template>
  <div class="layer-control-item">
    <div class="show" v-if="visible" @click="hide"></div>
    <div class="hide" v-else @click="show"></div>
    <!-- <div class="legend"></div> -->
    <div class="name">
      {{ layer.get("layerName") }}
    </div>
    <div class="addon">
      <slot name="addon">
        <!-- <div  v-if="editAble" :class="{active}" @click="handleActive"></div>  -->
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MiningLayerControlItem',
  props: {
    layer: {
      type: Object,
      default() {
        return null
      }
    } 
  },
  data() {
    return {
      visible:  false,
      active: false,
      editAble: false
    }
  },
  created() {
    this.binding()
  },
  beforeDestroy () {
    if(this.layer) {
      this.layer.un('change:visible', this.handleChange)
    }
  },
  methods: {
    binding () {
      if(this.layer) {
        this.layer.un('change:visible', this.handleChange)
        this.layer.on('change:visible', this.handleChange)
        this.visible = this.layer.get('visible')
        this.editAble = this.layer.get('editAble')
        console.log(this.layer.get('extent'))
      }
    },
    handleChange () {
      this.visible = this.layer.get('visible')
    },
    show () {
      this.layer.set('visible', true)
    },
    hide () {
      this.layer.set('visible', false) 
    },
    handleActive () {
      this.active = !this.active
      this.$message('功能开发中...')
    }
  }
}
</script>

<style lang="less" scoped>
.layer-control-item {
  display: flex;
  padding: 5px 10px;
  flex-direction: row;
  color: #999;
  font-size: 14px;
  min-height: 20px;
  cursor: pointer;
  gap: 2px;

  justify-items: center;
  &:hover {
    background-color: rgba(153, 153, 153, 0.208);
  }
  .show {
    width: 25px;
    height: 20px;
    background-image: url("../assets/images/eye.png");
    background-repeat: no-repeat;
    background-size: 20px;
    cursor: pointer;
  }
  .hide {
    width: 25px;
    background-image: url("../assets/images/eye-close.png");
    background-repeat: no-repeat;
    background-size: 20px;
    cursor: pointer;
  }
  .legend {
    display: inline-block;
    width: 25px;
    height: 100%;
    min-height: 20px;
    border: 1px solid #dcdfe6;
  }
  .name {
    padding: 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }

  .icon {
    width: 12px;
  }

  .addon {
    // width: 25px;
    // background-image: url('../../assets/images/edit.png');
    // background-repeat: no-repeat;
    // background-size: 20px;
    display: flex;
    cursor: pointer;
    justify-content: center;
    flex-direction: column;
    & div {
    }

    &.active {
      // background-image: url('../../assets/images/editing.png');
    }
  }
}
</style>